import React, {Component} from 'react';
import TheUpload from "@/components/TheUpload";
import {Collapse, Form, Input, Select, Space,} from "antd";
import {CaretRightOutlined} from "@ant-design/icons";
import _ from 'lodash'
import { apiStoreServiceLabelList, apiQueryMember } from '@/request/store'

const {Panel} = Collapse;
const {Option} = Select;

class BasicInfo extends Component {
    constructor(props) {
        super(props);
        this.formRef = React.createRef()
        this.state = {
            showLogoUpFile: true,
            showVideoUpFile: true,
            showCoverUpFile: true,
            logoFileList:[],
            videoFileList:[],
            coverFileList:[],
            memberOptions:[]
        };
    }
    async componentDidMount() {
        await this.getMemberList();
        await this.getLabelList();
        this.setState({
            showLogoUpFile: 'true',
            showVideoUpFile: 'true',
            showCoverUpFile: 'true',
        })
        this.props.onRef(this)
        let { data }= this.props;
        this.echoData(data)
    }
    // 管理员列表
    getMemberList = async () => {
        let res = await apiQueryMember()
        if (res.code === 0 && res.data) {
            let data = res.data.map(v => {
                return {
                    label: `${v.memberId}-${v.nickName}`,
                    value: v.memberId
                }
            })
            this.setState({ memberOptions: data })
        }
    }
    // 店铺标签
    getLabelList = async () => {
        let res = await apiStoreServiceLabelList({})
        if (res.code === 0 && res.data) {
            let labelList = res.data.map(v => {
                return {
                    value: v.serviceLabelId,
                    label: v.storeServiceName
                }
            })
            this.setState({ labelList })
        }
    }
    // 数据回显
    echoData = (data) => {
        console.log(data)
        if(Object.keys(data).length == 0){
            return
        }
        let logoFileList = [
            {
                uid: '-1',
                name: 'image.png',
                status: 'done',
                url: data.shopLogo,
            },
        ], coverFileList = []
        if (data.shopCover){
            data.shopCover.split(",").map((item,index)=>{
                coverFileList.push(
                    {
                        uid: '-'+index,
                        name: index+'image.png',
                        status: 'done',
                        url: item,
                    }
                )
            })
        }
        this.formRef.current.setFieldsValue(data)
        this.setState({
            logoFileList:[...logoFileList],
            coverFileList:[...coverFileList],
        })
    }
    //form表单确定事件
    onFinish = async () => {
        console.log('子组件的方法被父组件调用')
        let formValue = await this.formRef.current.validateFields();
        return formValue
    }
    getFileResult = (value, key) => {
        if (value && value.length) {
            let arr = value.map(v => {
                // console.log(v)
                if (v.response && v.response.code === 0) {
                    return v.response.data
                } else {
                    return v.url
                }
            }).join(',')
            this.formRef.current.setFieldsValue({
                [key]: arr
            })
        }
    };

    render() {
        let {
            showLogoUpFile,
            showVideoUpFile,
            showCoverUpFile,
            logoFileList,
            videoFileList,
            coverFileList,
            memberOptions,
            labelList
        } = this.state;
        let accept = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif', 'image/bmp',]
        return (
            <div>
                <Collapse
                    bordered={false}
                    activeKey={[-1]}
                    expandIcon={({isActive}) => <>基本信息<CaretRightOutlined rotate={90}/></>}
                    style={{marginBottom:"15px"}}
                >
                    <Panel key="full"></Panel>
                </Collapse>
                <Form
                      ref={this.formRef}
                      labelCol={{
                          span: 4,
                      }}
                      wrapperCol={{
                          span: 8,
                      }}
                >
                    <Form.Item rules={[{required: true}]} label="店铺类型" name="type">
                        <Input.Group compact>
                            <Space style={{display: 'flex'}} align="baseline">
                                <Form.Item
                                    name={["type", 'SelectL']}
                                    noStyle
                                >
                                    <Select
                                        key={"type" + "SelectL"}
                                        style={{
                                            width: 200,
                                        }}
                                        placeholder={"请选择"}
                                    >
                                        <Option value="M">门店</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name={["type", 'SelectR']}
                                    noStyle
                                >
                                    <Select
                                        key={"type" + "SelectR"}
                                        style={{
                                            width: 200,
                                        }}
                                        placeholder={"请选择"}
                                    >
                                        <Option value="Z">自营</Option>
                                        <Option value="J">加盟</Option>
                                        <Option value="L">代理</Option>
                                        <Option value="X">代销</Option>
                                        <Option value="S">第三方</Option>
                                    </Select>
                                </Form.Item>
                            </Space>
                        </Input.Group>
                    </Form.Item>
                    <Form.Item rules={[{required: true}]} label="店铺名称" name="shopName">
                        <Input maxLength={32} placeholder={"请输入店铺名称，不可重复"}/>
                    </Form.Item>
                    <Form.Item rules={[{required: true}]} label="店铺LOGO" name="shopLogo"
                               // extra={`仅限jpg,jpeg格式文件，大小不超过${maxSize}M`}
                    >
                        {
                            !_.isEmpty(showLogoUpFile) &&  <TheUpload fileList={logoFileList} maxSize={10} getFileResult={(e) => this.getFileResult(e, 'shopLogo')} len={1} />
                        }
                    </Form.Item>
                    {/*<Form.Item label="店铺视频" name="video"*/}
                    {/*    extra={`仅限MP4格式文件`}*/}
                    {/*>*/}
                    {/*    {*/}
                    {/*        !_.isEmpty(showVideoUpFile) &&  <TheUpload fileType={'video'} fileList={videoFileList} getFileResult={(e) => this.getFileResult(e, 'video')} len={1} />*/}
                    {/*    }*/}
                    {/*</Form.Item>*/}
                    <Form.Item label="店铺封面" name="shopCover"
                        extra={`仅支持gif、jpeg、png、bmp4种格式，大小不超过10M，最多5张图片`}
                    >
                        {
                            !_.isEmpty(showCoverUpFile) &&  <TheUpload accept={accept} fileList={coverFileList} maxSize={10} getFileResult={(e) => this.getFileResult(e, 'shopCover')} len={5} />
                        }
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true }]}
                        label="联系人"
                        name={'shopContacts'}>
                        <Input placeholder="请输入联系人" />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true }]}
                        label="联系电话"
                        name={'userMobile'}>
                        <Input placeholder="请输入联系电话" maxLength={11}/>
                    </Form.Item>
                    <Form.Item label="管理员" name="userId" rules={[{ required: true }]}>
                        <Select
                            showSearch
                            optionFilterProp="label"
                            filterOption={(input, option) => option.label.includes(input)}
                            options={memberOptions}
                            placeholder="请选择门店管理员" />
                    </Form.Item>
                    <Form.Item
                        rules={[{ required: true }]}
                        label="门店标签"
                        name={'serviceLabelIds'}>
                        <Select
                            placeholder="请选择门店标签"
                            mode="multiple"
                            allowClear
                            options={labelList}
                            // onChange={this.selectChange}
                        />
                    </Form.Item>
                    <Form.Item label="店铺简介" name="shopProfile">
                        <Input.TextArea allowClear showCount maxLength={200} placeholder={"请添加店铺备注描述,不超过200字"}/>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default BasicInfo;
